<template>
  <view class="clan-tabs">
    <view class="tabs-header">
      <view
        v-for="tab in tabs"
        :key="tab.key"
        :class="['tab-item', { active: activeTab === tab.key }]"
        @click="switchTab(tab.key)"
      >
        <text class="tab-text">{{ tab.label }}</text>
      </view>
    </view>

    <view class="tabs-content">
      <view class="tab-panel">
        <transition name="fade-in-up">
          <view v-show="activeTab === 'members'" class="tab-content-wrapper">
            <ClanMembers
              :member-list="memberList"
              :clanId="clanId"
              @view-member="handleViewMember"
            />
          </view>
        </transition>

        <transition name="fade-in-up">
          <view v-show="activeTab === 'wall'" class="tab-content-wrapper">
            <ClanWall :award-list="awardList" :clanId="clanId" />
          </view>
        </transition>

        <transition name="fade-in-up">
          <view v-show="activeTab === 'events'" class="tab-content-wrapper">
            <ClanEvents
              :event-list="eventList"
              @view-more="handleViewMoreEvents"
              @view-event="handleViewEvent"
            />
          </view>
        </transition>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import ClanMembers from "./ClanMembers.vue";
import ClanWall from "./ClanWall.vue";
import ClanEvents from "./ClanEvents.vue";
import HonorPersonAPI from "@/api/genealogy/honorPerson";

interface Member {
  id: string;
  name: string;
  description: string;
  level: number;
  fee: number;
}

interface Award {
  year: string;
  name: string;
}

interface Event {
  image: string;
  title: string;
  time: string;
  location: string;
  [key: string]: any;
}

interface Props {
  memberList?: Member[];
  awardList: Award[];
  eventList: Event[];
  clanId?: string;
}

const props = withDefaults(defineProps<Props>(), {
  memberList: () => [],
  clanId: "",
});

const emit = defineEmits<{
  "view-member": [member: Member];
  "view-more-events": [];
  "view-event": [event: Event];
}>();

const memberList = ref<Member[]>([]);

const tabs = [
  { key: "members", label: "组织架构" },
  { key: "wall", label: "荣誉墙" },
  { key: "events", label: "近期活动" },
];

const activeTab = ref("members");

const switchTab = (tabKey: string) => {
  activeTab.value = tabKey;
};

const handleViewMember = (member: Member) => {
  emit("view-member", member);
};

const handleViewMoreEvents = () => {
  emit("view-more-events");
};

const handleViewEvent = (event: Event) => {
  emit("view-event", event);
};
const getClanMemList = async () => {
  try {
    const res = await PositionAPI.getPositionPage({
      pageNum: 1,
      pageSize: 10,
    });
    if (res) {
      memberList.value = res?.list.map((item: any) => {
        return {
          id: item.id,
          name: item.name || "未知姓名",
          description: item.description || "成员",
          level: item.level,
          fee: item.fee || "",
        };
      });
    }
  } catch (error) {
    console.error("获取宗亲荟成员列表失败:", error);
  }
};

onMounted(() => {
  // getClanMemList()
  // getHonorPersonList()
});
</script>

<style scoped>
.clan-tabs {
  margin-bottom: 20rpx;
}

.tabs-header {
  display: flex;
  background-color: #fff;
  border-radius: 12rpx 12rpx 0 0;
  border-bottom: 1rpx solid #eee;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-text {
  font-size: 28rpx;
  color: #666;
  transition: all 0.3s ease;
}

.tab-item.active .tab-text {
  color: #ff6b35;
  font-weight: 600;
  transform: scale(1.05);
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #ff6b35;
  border-radius: 2rpx;
  animation: slideIn 0.3s ease;
}

.tabs-content {
  background-color: #fff;
  border-radius: 0 0 12rpx 12rpx;
  overflow: hidden;
  position: relative;
}

.tab-panel {
  width: 100%;
}

.tab-content-wrapper {
  width: 100%;
}

@keyframes slideIn {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 40rpx;
    opacity: 1;
  }
}
</style>

<style scoped>
/* 动画样式 */
.fade-in-up-enter-active {
  transition: all 0.3s ease;
}

.fade-in-up-leave-active {
  transition: all 0.3s ease;
}

.fade-in-up-enter-from {
  opacity: 0;
  transform: translateY(10px);
}

.fade-in-up-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.fade-in-up-enter-to,
.fade-in-up-leave-from {
  opacity: 1;
  transform: translateY(0);
}

.tab-content-wrapper {
  position: relative;
  width: 100%;
}

.tab-panel {
  position: relative;
  min-height: auto;
  height: auto;
}
</style>
